<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
	<style>
	body
	{
		background-color: grey;	
	}
	div
	{
		height: 80px;
		width: 200px;
		border: black 1px solid;
		float: left;
		background: white;
		position: absolute;
		z-index: 0;
	}
	#test2
	{
		left: 208px;	
	
	}
	div:hover
	{
		opacity: 0.5;
		background: black;
	}
	</style>
	<script>
	$(window).load(function(){
		$("div").hover(function(){
			var po = $(this).position();
				$(this).animate({
					"left": (po.left - 30) + "px",
					"top": (po.top - 30) + "px",
					"z-index":  "1"
				}, "easein", doetrug);
			})
		})
		
	function doetrug()
	{
		var po = $(this).position();
		$(this).animate({
			"left": (po.left + 30) + "px",
			"top": (po.top + 30) + "px",
			"z-index":  0
		}, "easein");
	}
	</script>
</head>
<body>
<h3>CSS2 animations</h3>
<div class="test"></div>
<div class="test" id="test2"></div>
</body>
</html>
